<template>
    <view class="container">
        <view class="booking-details" v-for="(item, index) in booking" :key="index">
            <image class="booking-image" src="https://pic.imgdb.cn/item/66a61c07d9c307b7e9b7c219.png"></image>

            <text class="booking-title">{{ item.title }}</text>

            <text class="booking-subtitle">{{ item.subtitle }}</text>

            <view class="box3">
                <text>¥{{ item.money }}</text>
            </view>
        </view>
        <view class="box1">
            <ant-container title="使用人信息">
                <ant-selector :options="items1" />
                <ant-input placeholder="请输入尺码" onChange="onChange" />
            </ant-container>
            <block v-for="(item, index) in xinxi" :key="index">
                <view>
                    <ant-input placeholder="请输入联系方式" onChange="onChange" />
                </view>
            </block>
        </view>
        <view class="discount-info">
            <text class="discount-info1">优惠券</text>
            <text class="text1">选择优惠券</text>
            <text class="discount-info" v-for="(item, index) in xinxi" :key="index">可用余额 ¥{{ item.money }}</text>
            <text>是否抵扣</text>
            <switch class="box" :checked="isDiscountApplied" onChange="toggleDiscount" />
        </view>

        <view class="total-amount">
            <text>总额</text>
            <text style="color: red" v-for="(item, index) in xinxi" :key="index">¥{{ item.money1 }}</text>
        </view>

        <button class="pay-button" onTap="goToPay">去支付</button>
    </view>
</template>

<script>	import {
		ref,
		onMounted
	} from 'vue';
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app";

export default {
    components: {
   
    },
    data() {
        return {
            items1: [
                {
                    text: '身高',
                    value: '1'
                },
                {
                    text: '体重',
                    value: '2'
                },
                {
                    text: '鞋码',
                    value: '3'
                }
            ],
            hotel: [
                {
                    name: '',
                    title: '大床房 | 含早餐 | 免费取消 | ¥150/每晚',
                    title1: '2021/09/12 - 2021/09/13 3晚 共1人'
                }
            ],
            booking: [
                {
                    time: '10-23 周一 - 10-25 周三',
                    duration: '共三小时',
                    title: '敦煌服饰',
                    subtitle: '免费妆造',
                    money: '150'
                }
            ],
            xinxi: [
                {
                    title2: '1512456565',
                    money: '21:00',
                    money1: '28:00'
                }
            ],
            isDiscountApplied: true
        };
    },
    onLoad() {
        // 页面加载时执行的逻辑
    },
    methods: {
        toggleDiscount(e) {
            this.setData({
                isDiscountApplied: e.detail.value
            });
        },

        goToPay() {
            // 处理支付逻辑
            uni.alert({
                title: '支付功能尚未实现'
            });
        },

        onChange(value, e) {
            console.log(value, e);
        }
    }
};
</script>
<style>
.container {
    padding: 20rpx;
}
.hotel-info {
    margin-bottom: 20rpx;
}
.hotel-name {
    display: block;
    font-size: 32rpx;
    font-weight: bold;
}
.hotel-details,
.date {
    display: block;
    font-size: 28rpx;
    color: #888;
}
.discount-info1 {
    margin: 50rpx 0;
    display: inline-block;
}
.total-amount,
.discount-info {
    margin: 50rpx 0;
    display: block;
    font-size: 18px;
}
.pay-button {
    background-color: #ff9900;
    color: #fff;
    font-size: 28rpx;
    border-radius: 5rpx;
    padding: 10rpx 0;
    text-align: center;
}
.box {
    display: inline;
    position: relative;
    float: right;
    bottom: 20px;
}
.box1 {
    flex-basis: 100%;
}
.image1 {
    width: 20px;
    height: 20px;
}
.text {
    position: relative;
    left: 100px;
}
.text1 {
    display: inline-block;
    color: #888;
    position: relative;
    left: 185px;
}
page {
    padding: 10px;
}
.input {
    padding: 4px 0 4px 0;
    border-radius: 4px;
    border: 1px solid transparent;
    transition: all 1s;
}
.booking-image {
    width: 88px;
    height: 88px;
    margin-top: 16px;
}

.booking-details {
    margin-top: 16px;
}

.booking-title {
    font-size: 20px;
    font-weight: bold;
    position: relative;
    bottom: 50px;
    left: 10px;
}

.booking-subtitle {
    color: #1782e8;
    font-size: 14px;
    position: relative;
    right: 70px;
    bottom: 30px;
}
.box3 {
    display: inline-block;
    position: absolute;
    left: 300px;
    margin-top: 40px;
    color: #1782e8;
    font-size: 25px;
}

</style>
